<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>

    <script src="../public/vue/dist/vue.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="../public/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="../public/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="../public/bootstrap/dist/js/bootstrap.min.js"></script>


    <link rel="stylesheet" href="../public/summernote/dist/summernote.css">
    <!-- <link rel="stylesheet" href="../public/summernote/dist/summernote-bs4.css"> -->

    <script src="../public/summernote/dist/summernote.js"></script>
    <script src="../public/summernote/dist/lang/summernote-zh-CN.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>



    <div class="container" id="blogApp">

        <div class="row">

            <h3>blog</h3>


        </div>



        <div class="row">


            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="firstname" class="col-sm-2 control-label">名字</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="blog.title">
                    </div>
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">简介</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="blog.digest">
                    </div>
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">正文</label>
                    <div class="col-sm-10">

                        <textarea class="form-control" id="summernote1" name="content" cols="60" rows="10">{{blog.content}}</textarea>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-default">保存</button>
                    </div>
                </div>
            </form>



        </div>



    </div>


</body>

</html>

<script>
    var vm = new Vue({
        el: '#blogApp',
        data: {
            blog: {},
            bookList: []
        },
        methods: {


            all: function () {

                var _self = this;
                $.ajax({
                    crossDomain: true,
                    type: "get",
                    url: "http://localhost:9000/edoCate/all",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if (response.code == 0) {

                            _self.bookList = response.dat;
                            console.log(response);
                        }

                    }
                });
            }
        },
        mounted: function () {

            var _self = this;
            $('#summernote1').summernote({
                lang: 'zh-CN',
                // placeholder: placeholder,
                minHeight: 300,
                dialogsFade: true, // Add fade effect on dialogs
                dialogsInBody: true, // Dialogs can be placed in body, not in
                // summernote.
                // disableDragAndDrop: false,// default false You can disable drag
                // and drop
                callbacks: {
                    onImageUpload: function (files, editor, $editable) {

                        // FormData，新的form表单封装，具体可百度，但其实用法很简单，如下
                        var data = new FormData();

                        // 将文件加入到file中，后端可获得到参数名为“file”
                        data.append("uploadFile", files[0]);

                        // ajax上传
                        $.ajax({
                            data: data,
                            type: "POST",
                            url: "/files/summernote", // div上的action
                            cache: false,
                            contentType: false,
                            processData: false,

                            // 成功时调用方法，后端返回json数据
                            success: function (response) {

                                console.log(response);

                                if (response.code == 0) {

                                    // editor.insertImage($editable, '../' + response.path);
                                    $("#summernote1").summernote('insertImage',
                                        '../' + response.path);
                                }
                            },
                            // ajax请求失败时处理
                            error: function () {
                                alert("上传失败！")
                            }
                        });



                    }
                }
            });



            // this.all();
        }
    })
</script>